<template>
    <div class="content">
        <Form :label-width="200" :model="form" :rules="rules" ref="form">
            <FormItem label="考试名称" prop="examName">
                <Input
                    v-model="form.examName"
                    :maxlength="20"
                    placeholder="校内唯一，1到20位"
                    style="width: 400px"
                />
            </FormItem>
            <FormItem label="考试时间" prop="dateValue">
                <!--<DatePicker
                    :value="form.dateValue"
                    v-model="form.dateValue"
                    type="datetimerange"
                    format="yyyy-MM-dd HH:mm"
                    placeholder="精确到分"
                    style="width: 300px"
                    @on-change="handleDateChange"
                ></DatePicker>-->
                <el-date-picker
                    style="border:1px solid #b7b7b7 !important"
                    size="small"
                    v-model="form.dateValue"
                    :value="form.dateValue"
                    type="datetimerange"
                    format="yyyy-MM-dd HH:mm"
                    value-format="yyyy-MM-dd HH:mm"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="handleDateChange"
                >
                </el-date-picker>
            </FormItem>
            <FormItem label="考试时长">
                <span>{{ testDuration }}分钟</span>
            </FormItem>
            <FormItem label="考试试卷" prop="paperId">
                <Button @click="paperVisible = true">选择试卷</Button> {{form.paperName}}
            </FormItem>
            <FormItem label="考试学生" prop="stuList">
                <Button @click="studentVisible = true">选择班级</Button> {{stuNames}}
            </FormItem>
            <FormItem>
                <div class="submit-footer">
                    <Button type="primary" @click="submit(1)">保存并发布</Button>
                    <Button type="primary" @click="submit(0)">保存</Button>
                    <Button @click="handleCancel">取消</Button>
                </div>
            </FormItem>
        </Form>
        <div v-if="paperVisible">
            <TestPaperModal @getPager="getPager" @hidePaper="hidePaper" :nowPaper="nowPaper" v-model="paperVisible" />
        </div>
        <div v-if="studentVisible">
            <StudentModal @getStudent="getStudent" @getStudentName="getStudentName" @hideStu="hideStu" :nowStu="nowStu" v-model="studentVisible" />
        </div>
    </div>
</template>
<script>
import TestPaperModal from './components/test-paper'
import StudentModal from './components/student-modal'
import { addExam, getExamDetail, editExam } from '@/api/paper'
export default {
    components: {
        TestPaperModal,
        StudentModal
    },
    inject: ['nextPageReload'],
    data () {
        return {
            stuNames: '',
            nowStu: '',
            nowPaper: '',
            paperVisible: false,
            studentVisible: false,
            form: {
                endTime: '',
                examId: '',
                examName: '',
                examTime: 0,
                paperId: '',
                paperName: '',
                startTime: '',
                status: 0,
                stuList: '',
                dateValue: []
            },
            rules: {
                examName: [
                    { required: true, message: '考试名称必填', trigger: 'blur' },
                    {
                        min: 1,
                        max: 20,
                        message: '校内唯一，1到20位',
                        trigger: 'blur,change'
                    }
                ],
                dateValue: [
                    {
                        required: false,
                        type: 'array',
                        message: '考试时间必填',
                        trigger: 'change'
                    }
                ],
                paperId: [
                    { required: true, message: '考试试卷必填', trigger: 'blur,change' }
                ],
                stuList: [
                    { required: true, message: '考试学生必填', trigger: 'blur,change' }
                ]
            }
        }
    },
    computed: {
        testDuration () {
            let v1 = this.form.startTime || ''
            let v2 = this.form.endTime || ''
            if (v1 && v2) {
                v1 = new Date(v1).getTime()
                v2 = new Date(v2).getTime()
                return parseInt((v2 - v1) / 1000 / 60)
            }
            return 0
        }
    },
    methods: {
        hidePaper () {
            this.paperVisible = false
        },
        hideStu () {
            this.studentVisible = false
        },
        getStudent (data) {
            this.form.stuList = data
            console.log(data)
            this.nowStu = data
        },
        getStudentName (data) {
            this.stuNames = data
        },
        getPager (data) {
            console.log(data)
            this.form.paperId = data.paperId
            this.form.paperName = data.paperName
            this.nowPaper = data.paperName
        },
        handleDateChange (v) {
            this.form.startTime = v[0]
            this.form.endTime = v[1]
        },
        submit (status) {
            this.form.examTime = this.testDuration
            console.log(this.form)

            // this.handleCancel()
            var params = {
                endTime: this.form.endTime,
                examId: this.form.examId,
                examName: this.form.examName,
                examTime: this.testDuration,
                paperId: this.form.paperId,
                paperName: this.form.paperName,
                startTime: this.form.startTime,
                status: status,
                stuList: this.form.stuList
            }
            this.$refs.form.validate((valid) => {
                console.log(valid)
                if (valid) {
                    if (this.form.examId) {
                        // 编辑
                        editExam(params).then((res) => {
                            if (res.data.code != '0000') {
                                this.$Message.error(res.data.msg)
                            } else {
                                this.$Message.success('保存成功')
                                this.handleCancel()
                            }
                        })
                    } else {
                        addExam(params).then((res) => {
                            if (res.data.code != '0000') {
                                this.$Message.error(res.data.msg)
                            } else {
                                this.$Message.success('保存成功')
                                this.handleCancel()
                            }
                        })
                    }
                }
            })
        },
        handleCancel () {
            this.nextPageReload()
            this.$router.push({
                name: 'examManageList',
                query: {}
            })
        },
        getExam (id) {
            let vm = this
            let params = { examId: id }
            getExamDetail(params).then(res => {
                let data = res.data.data.examListDto
                let classList = res.data.data.examListDto.classList
                vm.form = data
                vm.form.dateValue = [vm.form.startTime, vm.form.endTime]
                // this.form.stuList = this.form.stuList.split(',');
                vm.nowPaper = vm.form.paperName
                /* let stuarr = classList.map(item => {
                    return item.classId
                })
                let stuNameArr = classList.map(item => {
                    return item.className
                }) */
                vm.nowStu = classList
                this.form.stuList = vm.nowStu
                vm.stuNames = res.data.data.examListDto.classNameList
            })
        }
    },
    mounted () {
        let id = this.$route.query.id
        if (id) {
            this.getExam(id)
        } else {
            this.form = {
                endTime: '',
                examId: '',
                examName: '',
                examTime: 0,
                paperId: '',
                paperName: '',
                startTime: '',
                status: 0,
                stuList: '',
                dateValue: []
            }
        }
    },
    actived () {
        let id = this.$route.query.id
        if (id) {
            this.getExam(id)
        } else {
            this.form = {
                endTime: '',
                examId: '',
                examName: '',
                examTime: 0,
                paperId: '',
                paperName: '',
                startTime: '',
                status: 0,
                stuList: '',
                dateValue: []
            }
        }
    }
}
</script>
<style lang="less" scoped>
.ivu-form {
  max-width: 800px;
}
</style>
